<template>
	<section class="chart-container">
		<el-row>
			<el-col :span="12">
				<div id="chartColumn" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartBar" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartLine" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="12">
				<div id="chartPie" style="width:100%; height:400px;"></div>
			</el-col>
			<el-col :span="24">
				<a href="http://echarts.baidu.com/examples.html" target="_blank" style="float: right;">more>></a>
			</el-col>
		</el-row>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				chartColumn: null,
				chartBar: null,
				chartLine: null,
				chartPie: null
			}
		},
		methods: {
			drawColumnChart() {
				this.chartColumn = this.$echarts.init(document.getElementById('chartColumn'))
				this.chartColumn.setOption({
					title: {
						text: '柱状图'
					},
					tooltip: {},
					xAxis: {
						data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
					},
					yAxis: {},
					series: [{
						name: '销量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20]
					}],
					label: {
						normal: {
							show: true,
							position: 'top'
						}
					},
					itemStyle: {
						normal: {
							//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
							color: function(params) {
								var colorList = ['#c0504d', '#9bbb59', '#604a7b', '#948a54', '#e46c0b'];
								return colorList[params.dataIndex];
							}
						}
					}
				})
			},
			drawChartBar() {
				this.chartBar = this.$echarts.init(document.getElementById('chartBar'))
				this.chartBar.setOption({
					title: {
						text: '世界人口总量 - 条形图',
						subtext: '数据来源网络'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					legend: {
						data: ['2011年', '2012年']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
					},
					label: {
						normal: {
							show: true,
							position: 'right'
						}
					},
					series: [{
							name: '2011年',
							type: 'bar',
							data: [18203, 23489, 29034, 104970, 131744, 630230]
						},
						{
							name: '2012年',
							type: 'bar',
							data: [19325, 23438, 31000, 121594, 134141, 681807]
						}
					]
				});
			},
			drawChartLine() {
				this.chartLine = this.$echarts.init(document.getElementById('chartLine'))
				this.chartLine.setOption({
					title: {
						text: '折线图堆叠'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
							name: '邮件营销',
							type: 'line',
							stack: '总量',
							data: [120, 132, 101, 134, 90, 230, 210]
						},
						{
							name: '联盟广告',
							type: 'line',
							stack: '总量',
							data: [220, 182, 191, 234, 290, 330, 310]
						},
						{
							name: '视频广告',
							type: 'line',
							stack: '总量',
							data: [150, 232, 201, 154, 190, 330, 410]
						},
						{
							name: '直接访问',
							type: 'line',
							stack: '总量',
							data: [320, 332, 301, 334, 390, 330, 320]
						},
						{
							name: '搜索引擎',
							type: 'line',
							stack: '总量',
							data: [820, 932, 901, 934, 1290, 1330, 1320]
						}
					]
				})
			},
			drawChartPie() {
				this.chartPie = this.$echarts.init(document.getElementById('chartPie'))
				this.chartPie.setOption({
					title: {
						text: 'Customized Pie',
						left: 'center',
						top: 20,
						textStyle: {
							color: '#ccc'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},

					visualMap: {
						show: false,
						min: 80,
						max: 600,
						inRange: {
							colorLightness: [0, 1]
						}
					},
					series: [{
						name: '访问来源',
						type: 'pie',
						radius: '55%',
						center: ['50%', '50%'],
						data: [{
								value: 335,
								name: '直接访问'
							},
							{
								value: 310,
								name: '邮件营销'
							},
							{
								value: 274,
								name: '联盟广告'
							},
							{
								value: 235,
								name: '视频广告'
							},
							{
								value: 400,
								name: '搜索引擎'
							}
						].sort(function(a, b) {
							return a.value - b.value;
						}),
						roseType: 'radius',
						label: {
							normal: {
								textStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: 'rgba(255, 255, 255, 0.3)'
								},
								smooth: 0.2,
								length: 10,
								length2: 20
							}
						},
						itemStyle: {
							normal: {
								color: '#c23531',
								shadowBlur: 200,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},

						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function(idx) {
							return Math.random() * 200;
						}
					}]
				})
			},
			drawChart() {
				this.drawColumnChart()
				this.drawChartBar()
				this.drawChartLine()
				this.drawChartPie()
			}
		},
		mounted: function() {
			var that = this
			that.drawChart()

			window.onresize = function() {
                that.chartColumn.resize();
                that.chartBar.resize();
                that.chartLine.resize();
                that.chartPie.resize();
            };
		},
		updated: function() {
			this.drawCharts()
		}
	};
</script>

<style lang="less" scoped>
	@media screen and (max-width: 1300px) {
		.days {
			li {
				padding: 5px 0 !important;
			}
		}
	}

	.no_work {
		display: none;
	}

	.weeks {
		display: flex;
		border-top: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		border-left: 1px solid #e0e0e0;

		.week {
			flex: 1;
			text-align: center;
			border-right: 1px solid #e0e0e0;
			padding: 10px 0;

			p {
				margin-bottom: 10px;
			}

			.head {
				line-height: 48px;
			}
		}
	}

	.events-week {
		display: flex;
		border-bottom: 1px solid #e0e0e0;
		border-left: 1px solid #e0e0e0;

		.event-box {
			flex: 1;
			text-align: center;
			border-right: 1px solid #e0e0e0;
			padding: 10px 0;
			min-height: 80px
		}
	}

	.pikDate {
		margin-bottom: 20px;


		.el-button {
			width: 100%
		}
	}

	.today-item {
		cursor: pointer;
		line-height: 45px;
	}

	.selected {
		height: 57px !important;
		box-sizing: border-box;
		color: #fff !important;
		background: #409eff !important;
	}

	.item-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.prev-btn,
	.next-btn {
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;

		// padding: 5px 10px;
		// border: 1px solid #ccc;
		.fa-icon {
			font-size: 18px;
		}
	}

	.right-pick-btn {
		// height: 55px;
		// .el-input--small .el-input__inner{
		//   height: 100%;
		// }
	}

	.date {
		font-size: 14px;
		margin-top: 15px;

		.time-range {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 10px 0;

			span {
				cursor: pointer;
				padding-bottom: 5px;
				border-bottom: 3px solid #fff;

				&:hover {
					border-bottom: 3px solid rgb(151, 198, 245);
				}

				&:active {
					border-bottom: 3px solid rgb(151, 198, 245);
				}
			}

			.active {
				border-bottom: 3px solid #409eff;
			}
		}

		.days {
			display: flex;

			li {
				cursor: pointer;
				padding: 5px 10px;
				border: 1px solid #ccc;
				border-right: none;
				list-style: none;
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 57px;

				.other-month {
					// color: #c0c4cc;
				}
			}

			.date-item {
				&:hover {
					background: #dff0d8;
				}

				&:active {
					background: #dff0d8;
				}

				p {
					margin-bottom: 5px;

				}
			}

			li:nth-last-child(1) {
				border-right: 1px solid #ccc;
			}
		}
	}
</style>
